<template>
  <div class="v-header">
    <div class="vh-txt">
      <a><h1 @click="jump_home" style="margin-top: 10px">铭朗云定制</h1></a>
      <p>{{$route.meta.title}}</p>
    </div>

    <ul class="vh-list">
      <li class="vhl-item">
       <a><p class="vhli-txt" @click="drawer = true">
          {{username}}
        </p></a>
      </li>
      <li class="vhl-item">
        <img
          src="../../assets/img/header-one.png"
          class="vhli-img"
          alt=""
          @click="jump_message"
        >
      </li>
      <li class="vhl-item">
        <img
          src="../../assets/img/header-two.png"
          class="vhli-img"
          alt=""
          @click="handleSignOut"
        >
      </li>
    </ul>

    <el-drawer
            title="我是标题"
            :visible.sync="drawer"
            :with-header="false"
    >
      <div class="mc-drawer">
        <div class="mcd-top">
          <span></span>
          <span>账号设置</span>
        </div>
        <h1 style="font-weight: bolder;margin-top: 20px">基本信息</h1>

        <div style="width: 100%;overflow: hidden;margin-top: 10px">
          <p style="font-size: 12px;font-weight: bold;float: left;line-height: 40px;margin-right: 15px;width: 60px">登录账号</p>
          <el-input v-model="username2" placeholder="请输入您的登录账号" disabled="disabled" style="float: left;width: 250px;height: 30px"/>
        </div>

        <div style="width: 100%;overflow: hidden;margin-top: 5px">
          <p style="font-size: 12px;font-weight: bold;float: left;line-height: 40px;margin-right: 15px;width: 60px">姓名</p>
          <el-input v-model="realname" placeholder="请输入您的真实姓名" style="float: left;width: 250px;height: 30px"/>
        </div>
        <div style="width: 100%;margin:  20px auto;border-bottom: 1px dashed #c4c2c2;height: 1px;"></div>

        <h1 style="font-weight: bolder;margin-top: 20px">安全设置</h1>
        <div style="width: 100%;overflow: hidden;margin-top: 10px">
          <p style="font-size: 12px;font-weight: bold;float: left;line-height: 40px;margin-right: 15px;width: 60px">选择类型</p>
          <el-select v-model="select_vue" placeholder="请选择修改类型" style="float: left;width: 250px;height: 30px">
            <el-option
                    v-for="item in select_type"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
            </el-option>
          </el-select>
        </div>

<!--        <div style="width: 100%;overflow: hidden;margin-top: 5px" v-show="this.select_vue=='0'">-->
<!--          <p style="font-size: 12px;font-weight: bold;float: left;line-height: 40px;margin-right: 15px;width: 60px">原密码</p>-->
<!--          <el-input v-model="oldpwd" placeholder="请输入您原来的密码" style="float: left;width: 250px;height: 30px"/>-->
<!--        </div>-->
        <div style="width: 100%;overflow: hidden;margin-top: 5px" v-show="this.select_vue=='0'">
          <p style="font-size: 12px;font-weight: bold;float: left;line-height: 40px;margin-right: 15px;width: 60px">新密码</p>
          <el-input v-model="newpwd" type="password" @blur="yanzheng" placeholder="请输入您新的密码" style="float: left;width: 250px;height: 30px"/>
        </div>
        <div style="width: 100%;overflow: hidden;margin-top: 5px" v-show="this.select_vue=='0'">
          <p style="font-size: 12px;font-weight: bold;float: left;line-height: 40px;margin-right: 15px;width: 60px">确认密码</p>
          <el-input v-model="surepwd" type="password" @blur="yanzheng" placeholder="请输入确认密码" style="float: left;width: 250px;height: 30px"/>
        </div>

        <div style="width: 100%;overflow: hidden;margin-top: 5px">
          <p style="font-size: 12px;font-weight: bold;float: left;line-height: 40px;margin-right: 15px;width: 60px">验证码</p>
          <el-input v-model="phonecode" placeholder="请输入手机验证码" style="float: left;width: 152px;height: 30px"/>
          <a><p style="width: 100px;height: 41px;background: #f2f2f2;color: #d0720f;font-size: 12px;text-align: center;padding-top: 10px;float: left;" @click="handleSendCode">{{lastTimeContent}}</p></a>
        </div>

        <div style="width: 100%;overflow: hidden;margin-top: 5px" v-show="this.select_vue=='1'">
          <p style="font-size: 12px;font-weight: bold;float: left;line-height: 40px;margin-right: 15px;width: 60px">新手机号</p>
          <el-input v-model="newphone" placeholder="请输入你要更换的新手机号" style="float: left;width: 250px;height: 30px"/>
        </div>

        <p class="mcd-btn" style="margin-top: 10px" @click="updateset">确定修改</p>
      </div>
    </el-drawer>

  </div>
</template>

<script>
  import { deleteAction, postAction, getAction } from '@/api/manage'
  import Qs from "qs";

export default {
  data() {
    return {
      oldpwd:'',
      newpwd:'',
      surepwd:'',
      newphone:'',
      lastTimeContent: "发送验证码",
      username:'',//用户名
      drawer: false,
      username2:"",
      password:"",
      paypassword:"",
      adress:"",
      realname:"",
      phonecode:'',//验证码
      myphone:'',
      select_vue:'请选择修改类型',
      select_type: [{
        value: '0',
        label: '修改密码'
      }, {
        value: '1',
        label: '更换手机号'
      },
        {
          value: '2',
          label: '修改用户名'
        },
      ],
      url: {
        show_data_token: '/user/interface/query_userInfoBytoken',
        sendcode: '/user/interface/getCaptcha',
        update_user_data: '/user/interface/update_userInfoById',
        update_phone: '/user/interface/change_phone',
      },
    };
  },
  // activated(){
  //   this.show_userinfo();
  // },
  mounted(){

  },
  created() {
    this.show_userinfo();
  },
  methods: {
    yanzheng(){
      if(this.newpwd.length<6){
        // this.$message.warning("密码长度不能小于6位")
        this.$notify.warning({
          title: "提示",
          message: "密码长度不能小于6位",
          duration: 1500,
        });
        return
      }
    },
    updateset(){
      let autohor_token = localStorage.getItem("token");
      if(this.select_vue=='请选择修改类型'){
        this.$notify.warning({
          title: "提示",
          message: "请选择修改类型",
          duration: 1500,
        });
        return
      }
      if(this.select_vue=='0'){
        // if(this.realname==null || this.realname==''){
        //   // this.$message.warning("姓名不能为空")
        //   this.$notify.warning({
        //     title: "提示",
        //     message: "姓名不能为空",
        //     duration: 1500,
        //   });
        //   return
        // }
        // else
          if(this.newpwd==null || this.newpwd==''){
          // this.$message.warning("请输入你新的密码")
          this.$notify.warning({
            title: "提示",
            message: "请输入你新的密码",
            duration: 1500,
          });
          return
        }else if(this.newpwd.length<6){
          // this.$message.warning("密码长度不能小于6位")
          this.$notify.warning({
            title: "提示",
            message: "密码长度不能小于6位",
            duration: 1500,
          });
          return
        }else if(this.newpwd != this.surepwd){
          // this.$message.warning("前后密码不一致")
          this.$notify.warning({
            title: "提示",
            message: "前后密码不一致",
            duration: 1500,
          });
          return
        }else if(this.phonecode==null || this.phonecode==''){
          // this.$message.warning("验证码不能为空")
          this.$notify.warning({
            title: "提示",
            message: "验证码不能为空",
            duration: 1500,
          });
          return
        }else {
          let params = {
            token:autohor_token,
            password: this.newpwd,
            realname:this.realname,
            phonecode:this.phonecode,
            phone:this.myphone
          };
          postAction(domain.publicUrl+this.url.update_user_data, Qs.stringify(params)).then(res => {
            let result = res.data;
            if (result.code==0) {
              // this.$notify.success({
              //   title: "修改成功",
              //   message: result.msg,
              //   duration: 2000,
              // });
              this.drawer=false;
              this.$message.success("修改成功！")
              this.show_userinfo();//查询用户信息
              this.phonecode='';
            } else {
              this.$message.error(result.msg)
              // this.$notify.error({
              //   title: "失败",
              //   message: result.msg,
              //   duration: 2000,
              // });
            }
          })
        }
      }else if(this.select_vue=='1'){
        if(this.phonecode==null || this.phonecode==''){
          // this.$message.warning("验证码不能为空")
          this.$notify.warning({
            title: "提示",
            message: "验证码不能为空",
            duration: 1500,
          });
          return
        }else if(this.newphone==null || this.newphone==''){
          // this.$message.warning("手机号不能为空")
          this.$notify.warning({
            title: "提示",
            message: "手机号不能为空",
            duration: 1500,
          });
          return
        }else if(!/^1[3456789]\d{9}$/.test(this.newphone)){
          // this.$message.warning("请输入正确的手机号码")
          this.$notify.warning({
            title: "提示",
            message: "请输入正确的手机号码",
            duration: 1500,
          });
          return
        }
        else {
          let params = {
            token:autohor_token,
            newphone: this.newphone,
            realname:this.realname,
            phonecode:this.phonecode,
            phone:this.myphone
          };
          postAction(domain.publicUrl+this.url.update_phone, Qs.stringify(params)).then(res => {
            let result = res.data;
            if (result.code==0) {
              this.drawer=false;
              this.$message.success("更换成功")
              this.show_userinfo();//查询用户信息
              this.phonecode='';
              this.newphone='';
            } else {
              this.$message.error(result.msg)
            }
          })
        }
      }else {//修改用户名
        if(this.realname==null || this.realname==''){
          this.$notify.warning({
            title: "提示",
            message: "姓名不能为空",
            duration: 1500,
          });
          return
        }else if(this.phonecode==null || this.phonecode==''){
          this.$notify.warning({
            title: "提示",
            message: "验证码不能为空",
            duration: 1500,
          });
          return
        }else {
           //执行修改用户名的逻辑
          let params = {
            token:autohor_token,
            realname:this.realname,
            phonecode:this.phonecode
          };
          postAction(domain.publicUrl+"/user/interface/change_user_realname", Qs.stringify(params)).then(res => {
            let result = res.data;
            if (result.code==0) {
              this.drawer=false;
              this.$message.success("修改成功")
              this.show_userinfo();//查询用户信息
              this.phonecode='';
            } else {
              this.$message.error(result.msg)
            }
          })
        }
      }
    },
    handleSignOut() {
      this.$confirm({
        title: '温馨提示',
        content: '确定要退出登录吗?',
        okText:'确定',
        cancelText:'取消',
        onOk() {
          localStorage.removeItem("token");
          window.history.go(0);
        },
        onCancel() {
        },
      });
    },
    jump_home(){//跳轉首頁
      this.$router.push('/');
    },
    jump_message(){//跳转消息
      this.$router.push('/my-message');
    },
    show_userinfo() {
      let autohor_token = localStorage.getItem("token");
      let params = {token:autohor_token};
      postAction(domain.publicUrl+this.url.show_data_token,Qs.stringify(params)).then(res=>{
        let result = res.data;
        if(result.code==0){
          this.username = result.data.username;
          //弹框里面的值
          this.username2 = result.data.username;
          this.password = result.data.showpwd;
          this.paypassword = result.data.payPassword;
          this.adress = result.data.address;
          this.realname = result.data.realname;
          this.myphone = result.data.phone;
        }else{
          // this.$message.error(result.msg)
          // this.$notify.error({
          //   title: "错误",
          //   message: "你的登录已失效，请重新登录",
          //   duration: 2000,
          // });
          // this.$router.replace({
          //   path:'/login',
          //   name:'login'
          // })
          // localStorage.removeItem("token");
          // window.history.go(0);
        }
      })
    },
    async handleSendCode() {
      if (this.myphone!=null && this.myphone!='') {
        if (this.lastTimeContent === "发送验证码") {
          if(this.select_vue=='请选择修改类型'){
            this.$notify.warning({
              title: "提示",
              message: "请选择修改类型",
              duration: 1500,
            });
            return
          }
          if(this.select_vue=='0') {
            if (this.realname == null || this.realname == '') {
              // this.$message.warning("姓名不能为空")
              this.$notify.warning({
                title: "提示",
                message: "姓名不能为空",
                duration: 1500,
              });
              return
            } else if (this.newpwd == null || this.newpwd == '') {
              // this.$message.warning("请输入你新的密码")
              this.$notify.warning({
                title: "提示",
                message: "请输入你新的密码",
                duration: 1500,
              });
              return
            } else if (this.newpwd.length < 6) {
              // this.$message.warning("密码长度不能小于6位")
              this.$notify.warning({
                title: "提示",
                message: "密码长度不能小于6位",
                duration: 1500,
              });
              return
            } else if (this.newpwd != this.surepwd) {
              // this.$message.warning("前后密码不一致")
              this.$notify.warning({
                title: "提示",
                message: "前后密码不一致",
                duration: 1500,
              });
              return
            }
          }
          var params = {phone:this.myphone};
          postAction(domain.publicUrl+this.url.sendcode,Qs.stringify(params)).then(res=>{
            var result = res.data;
            if(result.code==0){
              // this.$message.success(result.msg)
              this.$notify.success({
                title: "成功",
                message: result.msg,
                duration: 2000,
              });
              let lastTime = 59;
              let timer = setInterval(() => {
                if (lastTime > 0) {
                  this.lastTimeContent = lastTime + "s";
                  lastTime--;
                } else {
                  window.clearInterval(timer);
                  this.lastTimeContent = "发送验证码";
                }
              }, 1000);
            }else{
              // this.$message.error(result.msg)
              this.$notify.error({
                title: "错误",
                message: result.msg,
                duration: 2000,
              });
            }
          })
        } else {
          this.$notify.warning({
            title: "错误",
            message: "请不要频繁点击",
            duration: 1000,
          });
        }
      } else {
        this.$notify.error({
          title: "错误",
          message: "请输入手机号码！",
          duration: 1000,
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.v-header {
  width: 100%;
  height: 60px;
  background: #333333;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding: 0 34px;
  .vh-txt {
    display: flex;
    align-items: center;
    h1 {
      font-size: 20px;
      font-weight: 600;
      color: #f9d532;
    }
    p {
      height: 60px;
      line-height: 60px;
      margin-left: 70px;
      color: #f9d532;
      border-bottom: 3px #f9d532 solid;
    }
  }
  .vh-list {
    display: flex;
    align-items: center;
    .vhl-item {
      .vhli-txt {
        font-size: 16px;
        color: #ffffff;
        margin-top: 34px;
      }
      .vhli-img {
        width: 30px;
        height: 30px;
        margin-left: 28px;
        cursor: pointer;
        margin-top: 15px;
      }
    }
  }

  .mc-drawer {
    box-sizing: border-box;
    padding: 30px;

    .mcd-top {
      display: flex;
      align-items: center;

      span:nth-child(1) {
        display: block;
        width: 6px;
        height: 28px;
        background: #545454;
      }

      span:nth-child(2) {
        font-size: 18px;
        margin-left: 10px;
        font-weight: 600;
        color: #424242;
      }
    }

    .mcd-main {
      margin-top: 50px;

      li {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 15px;

        p:nth-child(1) {
          color: #232222;
          font-weight: 500;
          font-size: 12px;
        }

        p:nth-child(2) {
          color: #333333;
          font-weight: 500;
        }

        p:nth-child(3) {
          color: #d98a2e;
          font-weight: 200;
        }
      }
    }

    .mcd-btn {
      width: 100px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      cursor: pointer;
      background: #ffe56d;
      border-radius: 3px;
      color: #333;
      font-weight: 600;
      margin-top: 50px;
    }
  }
}
</style>
